<template>
    <div class="alarmMonitoring">
        <!-- <nu-col :span="24" style="height:calc(130px - 10px);"> -->
        <!-- <nutbTitle title="告警监视"></nutbTitle> -->
        <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
            :buttons="fyButtons">
            <NuformItem label="告警类型" prop="alarmType" width="auto">
                <nu-select class="searchSelect" :filterable="true" :list="alarmList" type="text"
                    v-model="formData.alarmType" autocomplete="off" @change="alarmChange" placeholder="请选择类型"
                    style="width: 200px;">
                </nu-select>
                <!-- <nu-input type="text" v-model="formData.alarmType" size="middle" placeholder="请输入"></nu-input> -->
            </NuformItem>
            <NuformItem label="告警时间" prop="alarmDate" width="auto">
                <el-date-picker v-model="formData.alarmDate" type="date" placeholder="请选择日期" style="width: 100%"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </NuformItem>
            <NuformItem label="告警内容" prop="alarmInfo" width="auto">
                <nu-input type="text" v-model="formData.alarmInfo" size="middle" placeholder="请输入" style="width: 300px;"></nu-input>
            </NuformItem>
            <div class="btnBox">
                <nu-button type="primary" class="searchButton" @click="searchTable">搜索</nu-button>
                <nu-button class="searchButton" @click="clearParams">清除</nu-button>
            </div>
        </NuVerifyForm>
        <!-- </nu-col> -->
        <!-- <nu-col :span="24"> -->
        <div class="line" ></div>
        <div style="height:35px;position: relative;padding: 0 10px;" class="renovateTime">
            <nu-button class="searchButton" @click="exportTable">导出</nu-button>
            <nu-button class="searchButton" v-print="printOption">打印</nu-button>
        </div>
        <!-- </nu-col> -->
        <!-- <nu-col :span="24" style="height: calc(100% - 130px - 10px);"> -->
        <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options"
            :pagination="pagination" @handleSizeChange="handleSizeChange" @handleChangePage="handleChangePage"
            >
        </NuTableList>
        <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="optionsPrint"
            style="position: absolute;left: -5000px;z-index: -100;opacity: 0;">
        </NuTableList>
        <!-- </nu-col> -->
    </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuButton from "@/components/base/button"
import NuTableList from "@/components/tableList/TableFormList"
import nuDialog from "@/components/base/dialog"
import axios from "axios";
export default {
    name: "alarmMonitoring",
    components: {
        nuCol, nutbTitle, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList, nuDialog,
        render: {
            functional: true,
            props: {
                row: Object,
                render: Function,
                index: Number,
                column: {
                    type: Object,
                },
            },
            render: (h, opt) => {
                const params = {
                    row: opt.props.row,
                    index: opt.props.index,
                };
                if (opt.props.column) params.column = opt.props.column;
                return opt.props.render(h, params);
            },
        },
    },
    data() {
        return {
            formData: {
                alarmType: '',
                alarmDate: '',
                alarmInfo: ''
            },
            fyButtons: [],
            dialogTitle: '',
            dialogShow: false,
            pagination: {
                pageSize: 20,
                total: 0,
                currentPage: 1,
                pageNum: 1
            },
            columns: [
                {
                    label: '序号',
                    prop: 'ranking',
                    width: '70px',
                    render: (h, params) => {
                        return h('span', params.index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize);
                    },
                },
                {
                    label: '告警类型',
                    prop: 'alarmTypeName',
                },
                {
                    label: '告警内容',
                    prop: 'alarmInfo',
                },
                {
                    label: '告警时间',
                    prop: 'alarmDate',
                }
            ],
            dataSource: [],
            alarmList: [],
            options: {
                'default-expand-all': true,
                'element-loading-background': 'rgba(225,239,242)',
                'element-loading-text': '数据正在加载中',
                'row-key': 'pid',
                'header-cell-style': {
                    background: 'rgba(105, 159, 209, 0.7)',
                    color: '#fff',
                    fontWeight: 'bold',
                    fontsize: '16px',
                },
                height: 'calc(100vh - 270px)',
                props: {
                    fixed: 'right'
                }
            },
            optionsPrint: {
                'row-key': 'pid',
                height: '100vh',
                tId: 'multipleTable',
                style: 'width:1000px'
            },
            printOption: {
                id: "multipleTable",
                preview: true,
                previewTitle: "预览",
                popTitle: "",
                extraHead: "",
                extraCss: `<meta http-equiv='Content-Language' content='zh-cn'/>`
            },
        };
    },
    computed: {
        dialogFormDisabled() {
            return this.dialogTitle == '详情'
        }
    },
    created() {
        this.getOneLevelDicts()
    },
    mounted() {
        this.getPointTableInformationData();
    },
    methods: {
        /**
         * 查询
         */
        searchTable() {
            this.$refs['formData'].searchForm('form');
        },
        /**
         * form组件内置查询事件
         */
        searchForm(val) {
            if (val) {
                this.getPointTableInformationData();
            }
        },
        /**
         * 类型change事件
         */
        alarmChange() { },
        /**
         * 导出
         */
        exportTable() {
            let postData = {
                ...this.formData,
                endDay: this.formData.startDay,
            };
            this.getDownload(window.api.alarmeExportFile, {
                ...postData
            }, `告警监视信息.xlsx`)
        },
        /**
         * dialogFormData组件内置提交事件
         */
        diaSubmitForm(val) {
            if (val) {
                if (this.dialogTitle == '编辑') {
                    this.editStationTableData()
                } else if (this.dialogTitle == '新增') {
                    this.addStationTableData()
                }
            }
        },
        alarmChange() {

        },
        /**
         * 弹窗-保存
         */
        diaSave() {
            this.$refs['dialogFormData'].submitForm('form');
        },
        /**
         * 弹窗-关闭
         */
        diaClose() {
            this.dialogShow = false
            // this.resetForm('dialogFormData')
        },
        /**
         * 重置表单
         */
        resetForm(formName) {
            this.$refs[formName].resetForm('form');
            for (let k in this[formName]) {
                this[formName][k] = ''
            }
        },
        /**
         * 每页条数变化事件
         */
        handleSizeChange(val) {
            this.pagination.currentPage = 1;
            this.pagination.pageNum = 1;
            this.pagination.pageSize = val;
            this.getPointTableInformationData();
        },
        /**
         * 改变分页触发事件
         */
        handleChangePage(val) {
            this.pagination.currentPage = val;
            this.pagination.pageNum = val;
            this.getPointTableInformationData();
        },
        /**
         * 清除数据
         */
        clearParams() {
            this.resetForm('formData')
        },
        /**
         * 重置表单
         */
        resetForm(formName) {
            this.$refs[formName].resetForm('form');
            for (let k in this[formName]) {
                if (Object.prototype.toString.call(this[formName][k]) == "[object String]") {
                    this[formName][k] = ''
                } else if (Object.prototype.toString.call(this[formName][k]) == "[object Array]") {
                    this[formName][k] = []
                } else if (Object.prototype.toString.call(this[formName][k]) == "[object Number]") {
                    this[formName][k] = ''
                }
            }
        },
        /**
         * 获取表格数据
         */
        getPointTableInformationData() {
            let postData = {
                ...this.formData,
                ...this.pagination,
            };
            for (let k in postData.query) {
                if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
                    postData.query[k] = postData.query[k].toString().trim();
                }
            }
            this.dataSource = [];
            this.$httpGet(window.api.alarmList, postData).then(res => {
                if (res.code == 200) {
                    this.pagination.total = res.total;
                    this.dataSource = res.rows;
                } else {
                }
            }).catch(err => {});
        },
        /**
         * 获取字典数据
         */
        getOneLevelDicts() {
            this.$httpGet(window.api.getOneLevelDicts, { dictType: "ALARM_TYPE", pageSize: 9999, pageNum: 1 }).then(res => {
                if (res.code == 200) {
                    this.alarmList = res.rows.map(item => {
                        return {
                            label: item.dictName,
                            value: item.dictActualValue
                        }
                    })
                } else { }
            }).catch(err => { });
        },
    }
};
</script>
    
<style scoped lang="scss">
.alarmMonitoring {
    height: 100%;
}

.searchForm {
    // height: calc(100% - 40px);
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-right: 160px;
}

.submitForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btnBox {
    display: flex;
    float: right;
    z-index: 10;
    position: absolute;
    // top: 15px;
    right: 10px;
    margin: 10px 0 0 0;
}

.dialogHeaderSearch {
    background-color: var(--model-bgc);
    padding: 10px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
}

::v-deep .el-upload {
    width: 100%;

    .el-upload-dragger {
        width: auto;
    }
}

.content {
    overflow-x: hidden;
    height: 100%;
    margin: 0 15px;

    p {
        margin: 0 0 0 10px;
        font-size: 16px;
        color: #797979;

        span {
            margin: 0 10px 0 0;
        }
    }
}

.alarm_box {
    padding: 20px;
    position: relative;
}

.alarm_item {
    width: 70%;
    display: flex;
    justify-content: flex-start;

    &.alartImg {
        position: absolute;
        right: -110px;
        top: 15px;
    }

    div span:first-child {
        display: inline-block;
        width: 80px;
        font-size: 16px;
        width: 80px;
        height: 30px;
        float: left;
        overflow: hidden;
        text-align: justify;
        text-align-last: justify;
    }
}
</style>
    
    